<template>
  <div
    class="component-list"
    :class="{ componentImageList: typeComponent === 'image' }"
  >
    <styleUpload
      v-if="typeComponent === 'image'"
      @success="handleSuccess"
      :showupload-list="false"
      :class="{ componentUpload: typeComponent === 'image' }"
    />
    <div
      class="component-item"
      :class="{ componentImageItem: typeComponent === 'image' }"
      v-for="(item, index) in list"
      :key="index"
      @click="onItemClick(cloneDeep(item))"
    >
      <l-text v-if="typeComponent === 'text'" v-bind="item" />
      <l-image v-else-if="typeComponent === 'image'" v-bind="item" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { v4 } from 'uuid'
import styleUpload from '../components/stylUpload.vue'
import { imageDefaultProps } from '../defaultProps'
import { message } from 'ant-design-vue'
import { getImageInfo } from '../helper'
import useEditorStore from '@/store/modules/editorStore'
import { cloneDeep } from 'lodash-es'
export default defineComponent({
  name: 'ComponentsList',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    typeComponent: {
      type: String,
      default: 'text',
    },
  },
  emits: ['on-item-click'],
  setup(props, context) {
    const editorStore = useEditorStore()

    const onItemClick = (componentProps: any) => {
      const componentData = {
        name: `l-${props.typeComponent}`,
        id: v4(),
        props: componentProps,
        layerName: `图层${editorStore.testComponents.length + 1}`,
        isHidden: false,
        isLocked: false,
      }
      context.emit('on-item-click', componentData)
    }
    const handleSuccess = (data: any) => {
      const componentData = {
        name: 'l-image',
        id: v4(),
        props: {
          ...imageDefaultProps,
        },
        layerName: `图层${editorStore.testComponents.length + 1}`,
      }
      const { res } = data

      componentData.props.src =
        Array.isArray(res.data) && res.data.length > 0 ? res.data[0] : res.data

      getImageInfo(data.file).then(({ width }) => {
        const maxWidth = 372
        componentData.props.width =
          width > maxWidth ? maxWidth + 'px' : width + 'px'

        message.success('上传成功')
        context.emit('on-item-click', componentData)
      })
    }
    return {
      onItemClick,
      handleSuccess,
      cloneDeep,
    }
  },
  components: { styleUpload },
})
</script>

<style scoped>
.component-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;
    border-radius: 5px;
  }
  &::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 5px;
  }
}
.componentImageList {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.componentUpload {
  width: 100%;
  /* margin-bottom: 10px; */
}

.component-item {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.componentImageItem {
  width: 100px;
}
.component-item > * {
  position: static !important;
}
</style>
